<!DOCTYPE html>
<html>
<head>
	<title>图书资源</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="http://localhost/GISC/public/static/css/book.css">
	<!-- <script type="text/javascript">
		// $('#myModal').modal();
		//模态框垂直居中
		$('#myModel').on('shown.bs.modal', function (e) {  
            // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零  
            $(this).css('display', 'block');  
            var modalHeight=$(window).height() / 2 - $('#myModel .modal-dialog').height() / 2;  
            $(this).find('.modal-dialog').css({  
                'margin-top': modalHeight  
            });  
        });  
	</script> -->
</head>
<body>
	<div class="box">

		<div class="div-hea">
			<a href="http://localhost/GISC/public/">首页</a>
			&gt;&gt;<!-- 在html里写& g t ;页面输出 "> " -->
			<a href="http://localhost/GISC/public/index/Book/book">图书资源</a>
			&gt;&gt;
			<a href="#">图书检索</a>
		</div>

		<div class="div-bo">
			<div class="div-ser">
				<center>
				    <form method="post" action="/GISC/public/index/Book/fuzzy_query">
				        <div>
				        	<select name="type" size="1" align="center" style="width:72px;height:36px">
				        	    <option value="Name">&nbsp;&nbsp;书&nbsp;&nbsp;名</option>
				                <option value="Publisher">&nbsp;&nbsp;出&nbsp;&nbsp;版</option>
				                <option value="Type">&nbsp;&nbsp;分&nbsp;&nbsp;类</option>
				                <option value="Writer">&nbsp;&nbsp;作&nbsp;&nbsp;者</option>
				                <option value="Label">&nbsp;&nbsp;标&nbsp;&nbsp;签</option>
				                <option value="Id">&nbsp;&nbsp;编&nbsp;&nbsp;号</option>
				            </select>
				    
				    		<input name="result" type="text" font-size="25px" style="width:400px; height:35px;border:1px solid #C5BABA">
				     		<input type="submit" class="but-ser" value="检&nbsp;&nbsp;索"></input>
				  		</div>
					</form>
				</center>
			</div>
			<div class="bo-one">
				{volist name="list" id="vo"}
					<div class="card">
						<div class="card-head">
							<img src="{$vo.Img}">
						</div>
						<div class="card-body">
							<!-- 了解详情按钮 -->
							<button id="but" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#{$vo.Id}">了解详情</button>
							<!-- 模态框（Modal） -->
							<div class="modal fade" id="{$vo.Id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content" style="width:400px; height:370px; text-align: center;">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
												&times;
											</button>
											<h4 class="modal-title" id="myModalLabel">
												<p style="text-align: center; font-size: 20px;">{$vo.Name}</p>
											</h4>
										</div>
										<div class="modal-body">
											<table>
												<tr>
													<td style="width: 100px;"></td>
													<td style="text-align: left; font-size: 20px; width: 80px;">编号:</td>
													<td>{$vo.Id}</td>
												</tr>
												<tr>
													<td style="width: 100px;"></td>
													<td style="text-align: left; font-size: 20px; width: 80px;">分类：</td>
													<td>{$vo.Type}</td>
												</tr>
												<tr>
													<td style="width: 100px;"></td>
													<td style="text-align: left; font-size: 20px; width: 80px;">作者：</td>
													<td>{$vo.Writer}</td>
												</tr>
												<tr>
													<td style="width: 100px;"></td>
													<td style="text-align: left; font-size: 20px; width: 80px;">出版：</td>
													<td>{$vo.Publisher}</td>
												</tr>
												<tr>
													<td style="width: 100px;"></td>
													<td style="text-align: left; font-size: 20px; width: 80px;">价格：</td>
													<td>{$vo.Price}</td>
												</tr>
												<tr>
													<td style="width: 100px;"></td>
													<td style="text-align: left; font-size: 20px; width: 80px;">地点：</td>
													<td>{$vo.Place}</td>
												</tr>
												<tr>
													<td style="width: 100px;"></td>
													<td style="text-align: left; font-size: 20px; width: 80px;">标签：</td>
													<td>{$vo.Label}</td>
												</tr>
											</table>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default" data-dismiss="modal">关闭
											</button>	
										</div>
									</div><!-- /.modal-content -->
								</div><!-- /.modal -->
							</div>
						</div>
					</div>	
				{/volist}
			</div>
		</div>
	</div>
</body>
</html>

